<script setup lang="ts">
	import { useWarehouse } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref } from "vue";
	import Delete from "@iconify-icons/ep/delete";
	import EditPen from "@iconify-icons/ep/edit-pen";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete
	} = useWarehouse();
	const formRef = ref();
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="物料名称">
				<el-input v-model="form.name" class="!w-[180px]" clearable placeholder="物料名称搜索" />
			</el-form-item>
			<el-form-item label="物料编码">
				<el-input v-model="form.code" class="!w-[180px]" clearable placeholder="物料编码搜索" />
			</el-form-item>
			<el-form-item label="物料类型">
				<el-tree-select v-model="form.materialCategoryId"  class="!w-[180px]" clearable filterable
					:data="form.materialCategorySelect" check-strictly :render-after-expand="false" :props="{
					children: 'children',
					label: 'name',
					value: 'materialCategoryId'
				}" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="物料列表" :columns="columns"
				@refresh="onSearch">
				<template #buttons>
					<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
						添加物料
					</el-button>
				</template>
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
						<template #warehouse="{ row }">
							{{row.warehouse.name}}
							<template v-if="row.warehouseArea">/{{row.warehouseArea.name}}</template>
							<template v-if="row.warehouseLocation">/{{row.warehouseLocation.name}}</template>
						</template>
						<template #operation="{ row }">
							<el-button class="reset-margin" link type="primary" :size="size"
								@click="openDialog('修改', row)" :icon="useRenderIcon(EditPen)">
								修改
							</el-button>
							<el-popconfirm :title="`是否确认删除?`" @confirm="handleDelete(row)">
								<template #reference>
									<el-button class="reset-margin" link type="primary" :size="size"
										:icon="useRenderIcon(Delete)">
										删除
									</el-button>
								</template>
							</el-popconfirm>
							<el-button class="reset-margin" link type="primary" :size="size">
								<a data-v-b1cafe07=""
									class="el-link el-link--primary el-tooltip__trigger"
									:href="'/#/materialPrint?id='+row.materialId" target="_blank" style="text-decoration: none;"><i
										class="el-icon"><svg xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 1024 1024">
											<path fill="currentColor"
												d="M256 768H105.024c-14.272 0-19.456-1.472-24.64-4.288a29.056 29.056 0 0 1-12.16-12.096C65.536 746.432 64 741.248 64 727.04V379.072c0-42.816 4.48-58.304 12.8-73.984 8.384-15.616 20.672-27.904 36.288-36.288 15.68-8.32 31.168-12.8 73.984-12.8H256V64h512v192h68.928c42.816 0 58.304 4.48 73.984 12.8 15.616 8.384 27.904 20.672 36.288 36.288 8.32 15.68 12.8 31.168 12.8 73.984v347.904c0 14.272-1.472 19.456-4.288 24.64a29.056 29.056 0 0 1-12.096 12.16c-5.184 2.752-10.368 4.224-24.64 4.224H768v192H256zm64-192v320h384V576zm-64 128V512h512v192h128V379.072c0-29.376-1.408-36.48-5.248-43.776a23.296 23.296 0 0 0-10.048-10.048c-7.232-3.84-14.4-5.248-43.776-5.248H187.072c-29.376 0-36.48 1.408-43.776 5.248a23.296 23.296 0 0 0-10.048 10.048c-3.84 7.232-5.248 14.4-5.248 43.776V704zm64-448h384V128H320zm-64 128h64v64h-64zm128 0h64v64h-64z">
											</path>
										</svg></i>
										<span class=""> 打印 </span>
								</a>
							</el-button>
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}
</style>